<template>
  <div class="cartcontrol">
    <transition name='move'>
     <div class="cart-decrease" v-show='food.count>0' @click.stop='decreaseCart'>
       <i class="inner icon-remove_circle_outline"></i>
     </div>
    </transition>
     <div class="cart-count" v-show='food.count>0'>{{food.count}}</div>
     <div class="cart-add icon-add_circle" @click.stop.prevent='addCart'></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  export default{
    props: ['food'],
    computed: {
    },
    methods: {
      addCart(event) {
        if (!event._constructed) {
          return
        }
        if (!this.food.count) {
          Vue.set(this.food, 'count', 1) //  原本数据里面没有count，需要自己添加
        } else {
          this.food.count++
        }
        this.$store.commit('getPosition', event)
      },
      decreaseCart(event) {
        if (!event._constructed) {
          return
        }
        if (this.food.count) {
          this.food.count--
        }
      }
    }
  }
</script>
<style lang='stylus' rel="stylesheet/stylus" scoped>
  .cartcontrol{
    font-size: 0
    .cart-decrease{
      display:inline-block
      padding:6px
      &.move-enter,&.move-leave-to{
        opacity:0
        transform:translate3d(24px,0,0)
        .inner{
          transform:rotate(180deg)
        }
      }
      &.move-enter-to,&.move-leave{
        opacity:1
        transform:translate3d(0,0,0)
        .inner{
          transform:rotate(0)
        }
      }
      &.move-enter-active,&.move-leave-active{
        transition:all 1s linear
        .inner{
          transition:all 1s linear
        }
      }
      .inner{
        display:inline-block
        line-height:24px
        font-size:24px
        color:rgb(0,160,220)
      }
    }
    .cart-count{
      display:inline-block
      vertical-align:top
      width: 12px
      padding-top:6px
      line-height:24px
      text-align:center
      font-size:10px
      color:rgb(147,153,159)
    }
    .cart-add{
      display:inline-block
      padding:6px
      line-height:24px
      font-size:24px
      color:rgb(0,160,220)
    }
  }
</style>
